<template>
  <view class="video-player">
    <video v-if="src" :src="src" :poster="extend.cover" :autoplay="true" :controls="true" class="video" @play="onPlay"
      @error="onError"></video>

    <view class="close" @tap="close">
      <text class="close-text">×</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      src: '',
      extend: '',
      // 添加参数传递支持
      queryData: null
    }
  },
  onLoad(options) {
    // 方式1：通过URL参数传递（小程序/H5适用）
    if (options.data) {
      try {
        this.queryData = JSON.parse(decodeURIComponent(options.data))
        this.src = this.queryData.content
        this.extend = this.queryData.extend
      } catch (e) {
        console.error('参数解析错误:', e)
      }
    }

    // 方式2：通过全局事件监听（App适用）
    uni.$on('chat-video-player', this.handleVideoData)
  },
  onUnload() {
    uni.$off('chat-video-player', this.handleVideoData)
  },
  methods: {
    handleVideoData(data) {
      this.src = data.content
      this.extend = data.extend.cover
    },
    onPlay() {
      console.log('视频开始播放')
    },
    onError(e) {
      console.error('视频播放错误:', e)
      uni.showToast({
        title: '视频播放失败',
        icon: 'none'
      })
    },
    close() {
      // 统一使用页面返回方式
      uni.navigateBack({
        delta: 1,
        animationType: 'slide-out-bottom',
        animationDuration: 200
      })
    }
  }
}
</script>

<style scoped>
.video-player {
  background-color: #000000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.video {
  width: 100%;
  height: 100%;
}

.close {
  border-radius: 50%;
  height: 80rpx;
  width: 80rpx;
  background-color: rgba(255, 255, 255, 0.6);
  position: fixed;
  bottom: 30vw;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.close-text {
  font-size: 60rpx;
  margin-top: -10rpx;
  color: #fff;
  line-height: 1;
}
</style>
